<template>
	<view>
		<custom fixed="fixed" background="#fff" mode="2" title="提现">
			<view slot="right" class="flex flex-y-center" style="width: 180rpx;transform: translateX(-10rpx);">

				<view @tap.stop="toPage('/pages/course/cashOutDetail')" class=" msg-add nowrap pa"
					style="left: -50rpx;">提现明细</view>
			</view>
		</custom>
		<view class="#333333 m-30 mt-56" style="">
			<view class="fs-30">
				可提现金额（元）
			</view>
			<view class="fs-32 blod mt-30" style="vertical-align:bottom;">
				<text class="" style="line-height: 34rpx;">
					￥
				</text>
				<text class="fs-48" style="line-height: 48rpx;font-size: 70rpx;">
					{{ totalAmount || '0'}}
				</text>
			</view>
		</view>
		<view class="cashout bg-FFFFFF">
			<view class="fs-30 color-222121">
				提现金额
			</view>
			<view class="flex flex-y-bottom color-333333 pb-36" style="margin-top: 86rpx;">
				<text class="fs-60 mr-10" style="line-height: 40rpx;">￥</text>
				<input @blur="number_input" @input="number_input" class="fs-40" type="number"
					style="transform: translateY(8rpx);" placeholder="输入提现金额" v-model="money"
					placeholder-style="font-size:30rpx;transform: translateY(4rpx);">
				<view style="width: 300rpx;text-align: right;" class="color-EF4034" @tap="allCashOut">
					全部提现
				</view>
			</view>
			<view class="flex flex-x-b mt-20 fs-26" style="border-top: 2rpx solid #F0F0F0;padding-top: 10rpx;">
				<view class="color-9B9B9B" v-if="commission">
					<view class='flex'>
						<view>提现手续费：￥</view>
						<view>{{commission}}</view>
					</view>
					<view class="flex" style="color: #fd7747;">
						<view class="flex">
							<view>最小提现金额：</view>
							<view>{{this.$store.state.CONFIG.MIN_WITHDRAWAL_AMOUNT}}元</view>
						</view>
						<view class="flex" style="margin-left: 10px;">
							<view>单日最高提现金额：</view>
							<view>{{this.$store.state.CONFIG.DAY_WITHDRAWAL_AMOUNT}}元</view>
						</view>
					</view>
				</view>
				<view v-else></view>
			</view>

		</view>
		<view class="cashout">
			<view class="fs-32 color-222121 blod">
				提现到支付宝
			</view>
			<view class="cashou-input flex flex-x-b fs-30">
				<view class="">
					支付宝账号
				</view>
				<view class="fs-30 flex flex-x-y" style="text-align: end;">
					<!-- <view v-if="!issetAlipay">{{ alipay }}</view>
					<input v-if="issetAlipay" v-model="alipay" type="text" placeholder="请输入支付宝账号"
						placeholder-style="font-size:30rpx"> -->

					<input v-model="alipay" @input="handleInputChange" type="text" placeholder="请输入支付宝账号"
						placeholder-style="font-size:30rpx">

					<view v-if="issetAlipay" class="fs-30" @tap="getsetAlipay" style="width: 80rpx;
					
					height: 60rpx;background: #FD7747;border-radius: 10rpx;text-align: center;line-height: 60rpx;color: #fff;margin:0 auto;
						margin-left: 10px;">
						确定
					</view>
				</view>
			</view>
			<view class="flex flex-x-b fs-30" style="margin-top: 30rpx;">
				<view class="">
					姓名
				</view>
				<view class="" style="text-align: end;"> {{ user_info.fullName }}
					<!-- <input type="text" value="张三" disabled> -->
				</view>
			</view>
			<view class="cashou-input flex flex-x-b fs-30">
				<!-- <view class="">
					图片验证码
				</view>
				<view class="" style="text-align: end;">
					<image @tap="get_code" :src="img" mode=""
						style="background-color: pink; width: 140rpx;height: 50rpx;transform: scale(1.3) translateX(-20rpx);">
					</image>
				</view> -->
				<view class="item-text-left mr-20">验证码</view>
				<input v-model="code" type="number" maxlength="10" class="flex-1 color-333333 fs-30"
					placeholder-class="color-999999 font" placeholder="请输入短信验证码">
				<view @click="sendRegistCode">{{time}}</view>
			</view>
		</view>
		<view style="padding: 26rpx 30rpx;position: fixed;bottom: 84rpx; width:100%;">
			<view class="fs-30" @tap="toCashOut"
				style="width: 550rpx;height: 90rpx;background: #FD7747;border-radius: 50rpx;text-align: center;line-height: 90rpx;color: #fff;margin:0 auto;">
				提现
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import api from './api/course'
	export default {
		data() {
			return {
				totalAmount: '',
				money: '',
				time: '获取验证码',
				code: '',
				currentTime: 60,
				disabled: false,
				alipay: '',
				issetAlipay: true,
			};
		},
		computed: {
			commission() {
				if (this.money === '') return ''
				return this.xs(this.xs(Math.abs(this.money), 2) * this.CONFIG.COMMISSION, 2)
			}
		},
		onLoad() {
			this.getAccount()
		},
		methods: {
			init() {
				this.setData({
					code: '',
					totalAmount: '',
					money: '',
					code: '',
					currentTime: 60,
					disabled: false,
					time: '获取验证码',
				})
				this.getAccount()
			},
			// 提现
			toCashOut() {
				if (!this.user_info.fullName) {
					this.$refs.toast.open({
						title: '提示',
						desc: '实名认证后才可以提现哦',
						right: '去实名',
						success: () => {
							this.toPage('/pages/user/truename?open=1');
						}
					});
					return;
				}

				if (this.money < this.$store.state.CONFIG.MIN_WITHDRAWAL_AMOUNT) {
					return this.showToast('提现金额低于最小提现金额')
				}

				const {
					totalAmount,
					money,
					code
				} = this
				let data = {
					amt: money,
					userId: this.user_info.id,
					mesCode: this.code
				}
				console.log('data', data)
				if (!money) return this.showToast('请填写提现金额，金额必须大于0')
				if (money > totalAmount) return this.showToast('提现金额不可超过可提现金额')


				if (!code) return this.showToast('请填写短信验证码')
				api.postCashOut(data).then(res => {
					console.log(res.status, 'res')
					if (res.status !== 200) return this.showToast(res.msg)
					if (res.status == 200) {
						this.showToast('提现成功')
						this.init();
						uni.$emit('refresh_income');
					} else {
						this.showToast('提现失败')
						this.init()
					}
				})

			},
			async getsetAlipay() {
				let phone = this.alipay
				var reg = /^1[3456789]\d{9}$/; //11位手机号码正则

				if (!reg.test(phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: "none"
					});
				} else {
					const {
						data,
						status,
						msg
					} = await api.setAlipay({
						alipay: this.alipay
					})
					if (status !== 200) return this.showToast(msg)
					console.log('设置支付宝账户', data)
					this.issetAlipay = false
				}

			},
			handleInputChange(event) {
				this.issetAlipay = true
				this.alipay = event.target.value;
			},
			async getAccount() {
				const {
					data,
					status,
					msg
				} = await api.getAccountInfo()
				if (status !== 200) return this.showToast(msg)
				console.log('获取账号信息', data)


				if (data) {
					this.totalAmount = data.amt || '0'
				}
				if (data.alipay) {
					this.alipay = data.alipay
					this.issetAlipay = false
				} else {
					this.alipay = ''
					this.issetAlipay = true
				}

				// this.alipay = this.user_info.phone
			},
			allCashOut() {
				this.money = this.totalAmount
			},
			//获取验证码
			sendRegistCode(e) {

				if (this.time != '获取验证码') {
					this.showToast('请稍等');
					return;
				}
				this.less(() => {
					let that = this;
					let phone = that.user_info.phone
					var reg =
						/^1[3456789]\d{9}$/; //11位手机号码正则
					if (phone.length == 0) {
						uni.showToast({
							title: '请输入手机号',
							icon: "none"
						})
					} else if (reg.test(phone) == true) {
						let interval;
						this.request({
							url: '/courseCashOut/getCashOutCode',
							data: {
								phone,
							},
							loading: true,
						}).then(res => {
							if (res.status == 200) {
								this.showToast('验证码已发送', 3000);
								that.time = that.currentTime + 's后重新获取';
								that.disabled = true;
								interval = setInterval(function() {
									that.time = that.currentTime - 1 + 's后重新获取';
									that.currentTime--;
									if (that.currentTime <= 0) {
										clearInterval(interval)
										that.time = '获取验证码',
											that.currentTime = 60,
											that.disabled = false
									}
								}, 1000)
							}
						})
					} else {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
					}


				})
			},
			number_input() {
				clearTimeout(this.inputtimer);
				this.inputtimer = setTimeout(() => {
					if ((String(this.money).length - 1 - String(this.money).indexOf('.') > 2 && String(this.money)
							.indexOf('.') > -1) || String(this.money)
						.indexOf('-') > -1) {

						this.$nextTick(() => {
							this.money = this.xs(Math.abs(this.money), 2);
						});
					}
				}, 200);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $pageColor;
	}

	.cashout {
		margin: 40rpx 25rpx 0;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
	}

	.color-222121 {
		color: #222121;
	}

	.color-9B9B9B {
		color: #9B9B9B;
	}

	.color-EF4034 {
		color: #EF4034;
	}

	.cashou-input {
		margin-top: 40rpx;
		// padding-bottom: 40rpx;
		// border-bottom: 2rpx solid #EBEBEB;
	}
</style>